class MoblieGroup {
  /**
   * @description 画布
   * @type {HTMLCanvasElement}
   */
  canvas;

  /**
   * @description
   * @type {MobileImageShape[]}
   */
  children = [];

  /**
   * @description 画布
   * @param {HTMLCanvasElement} canvas
   */
  setCanvas(canvas) {
    const ctx = canvas.getContext("2d");
    this.children.forEach((shape) => {
      shape.canvas = canvas;
      shape.ctx = ctx;
    });
    this.canvas = canvas;
  }

  /**
   * @description 添加图形到画布
   * @param {MobileImageShape[]} shapes
   */
  add(...shapes) {
    if (this.canvas) {
      const ctx = this.canvas.getContext("2d");
      shapes.forEach((shape) => {
        shape.canvas = this.canvas;
        shape.ctx = ctx;
      });
    }
    this.children.push(...shapes);
  }

  /**
   * @description 移除图形
   * @param {MobileImageShape[]} shapes
   */
  remove(...shapes) {
    this.children = this.children.filter((shape) => !shapes.includes(shape));
  }

  /**
   * @description 绘制
   */
  draw() {
    this.children.forEach((shape) => {
      if (shape.canvas) {
        shape.move();
        shape.draw();
      }
    });
  }
}
